<template>
  <div class="about">
    <h2 class="about-user clear">
      <img src="../assets/images/default.png" alt="" />
      <p>{{ userStore.username }}</p>
    </h2>
    <div>
      <MyButton text="退出" @click="quit" />
    </div>
  </div>
</template>

<script>
import MyButton from "../components/MyButton.vue";
import { mapState, mapMutations } from "vuex";
import { logoutApi } from "../mocks/userApi";

export default {
  name: "AboutView",
  components: {
    MyButton,
  },
  computed: {
    ...mapState(["userStore"]),
  },
  methods: {
    ...mapMutations({
      logout: "userStore/logoutMutaion",
    }),
    quit() {
      logoutApi()
        .then((res) => {
          if (res.code == "200") {
            this.logout();
            this.$router.push("/login");
          }
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.about-user {
  padding: 10px;

  img {
    float: left;
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
  p {
    float: left;
    margin-left: 10px;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    font-weight: 500;
  }
}
</style>